<template>
  <div class="app-container" :style="setBgColor(albumpic_big)">
    <div class="equipment">
      <x-tabs
        title="选择设备"
        :list="equipmentList"
        label="equipmentName"
        :shadow="false"
        :required="true"
        :width="200"
        align="center"
        styleLess="block"
        @tab-click="changeEquipmen"
      />
    </div>

    <el-backtop target=".question-list" />
    <!-- question-list -->
    <div
      v-if="questionList.length > 0"
      v-infinite-scroll="load"
      :infinite-scroll-disabled="loading"
      class="question-list"
    >
      <div
        v-for="questionItem in questionList"
        :key="questionItem.id + '' + questionItem.quType"
        class="question"
      >
        <question :question-info="questionItem" />
      </div>
    </div>

    <!-- loading -->
    <!-- <div
      v-show="loading"
      v-loading="true"
      element-loading-text="加载中"
      element-loading-spinner="el-icon-loading"
      style="height: 60px"
    /> -->
    <div v-if="noMore" class="noMore">没有更多了</div>
  </div>
</template>
<script>
import { findWrongQuestion } from '@/api/wrongQuestion'
import Question from './Question.vue'
import XTabs from '@/components/XTabs.vue'
import { getEquipment } from '@/api/report'
export default {
  name: 'WrongQestion',
  components: { Question, XTabs },
  data() {
    return {
      total: 0,
      pageNum: 0,
      pageSize: 10,
      questionList: [],
      loading: false,
      noMore: false,
      equipmentList: [],
      equipment: '',
      albumpic_big: '',

      topImg: {
        // 'PET/CT': require('../../assets/shebei_images/PETCT.jpg'),
        // 'SPECT/CT': require('../../assets/shebei_images/SPECT.jpg'),
        // 'PET/MR': require('../../assets/shebei_images/PETMR.jpg'),
        // 'BMD': require('../../assets/shebei_images/BMD.jpg'),
      }
    }
  },
  created() {
    this.getEquipmentData()
  },
  methods: {
    setBgColor(bgColor) {
      if (bgColor === '' || bgColor === '' || bgColor === undefined) {
        return { background: 'url(' + bgColor + ') center center no-repeat' }
      } else {
        return { background: 'url(' + bgColor + ') center center no-repeat' }
      }
    },

    load() {
      this.getWrongQuestionList()
    },
    getWrongQuestionList() {
      ++this.pageNum
      if (this.noMore) return false
      this.loading = true
      findWrongQuestion({
        questionEquipmentId: this.equipment.item.id,
        pageNum: this.pageNum,
        pageSize: this.pageSize
      }).then((res) => {
        console.log(res)
        this.questionList.push(...res.rows)
        this.total = res.total
        this.loading = false
        console.log(this.questionList)
        if (this.questionList.length === this.total) {
          this.noMore = true
          return false
        }
      })
    },

    changeEquipmen(e) {
      console.log(e) //选择设备标题
      this.equipment = e
      // console.log(this.equipment.item.id);
      this.questionList = []
      console.log('当前点击的设备', e)
      this.pageNum = 1
      this.noMore = false
      this.getWrongQuestionList()
      let str = e.item.equipmentName
      this.albumpic_big = this.topImg[str]
    },

    async getEquipmentData() {
      // 在页面被渲染之前就获取数据
      //获取设备数据
      let res = await getEquipment()
      console.log('获取设备数据', res)
      if (res.code == 200) {
        this.equipmentList = res.equipment.map((item) => {
          return { equipmentName: item.equipmentName, id: item.id }
        })
      }
    }
  }
}
</script>
<style lang="scss" scoped>
.app-container {
  display: flex;
  height: calc(100vh);
  overflow: hidden;
  box-sizing: border-box;
  padding: 0px;
  background-color: #fafafa;

  .question-list {
    width: 1000px;
    height: calc(100vh - 175px);
    margin-left: 30px;
    overflow: auto;
    padding: 20px;
    box-sizing: border-box;
  }

  .question {
    position: relative;
    max-width: 1600px;
    margin: auto;
    background-color: #ffffff;
    padding: 15px 10px;
    margin-bottom: 10px;
    border-radius: 10px;
    box-shadow: rgba(0, 0, 0, 0.1) -4px 9px 25px -6px;
    background-color: rgba(150, 215, 255, 0.242);
  }

  ::v-deep .el-loading-mask {
    background-color: transparent;
  }
}
.noMore {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 900px;
  height: 100%;
  text-align: center;
  font-size: 18px;
  color: #606266;
  box-sizing: border-box;
}
.equipment {
  display: flex;
  padding-left: 30px;
  margin-left: 50px;
  margin-top: 80px;
  width: 320px;
  height: 250px;
  box-sizing: border-box;
  box-shadow: 4px 0px 25px 6px rgba(156, 152, 152, 0.242);
  background-color: rgba(150, 215, 255, 0.242);
}

.app-container {
  min-height: calc(100vh - 60px);
  box-sizing: border-box;
  // background: url('../../assets/shebei_images/BMD.jpg') center center no-repeat;
  width: 100%;
  background-size: 100% 100% !important;

  .tabs-container {
    background-color: rgba(0, 0, 0, 0);
  }
}

.el-loading-mask {
  background-color: rgba(0, 0, 0, 0);
}
</style>
